<template>
	<view class="page">
		<view class="search-title">
			<view class="search-title-left" @click="visableChange">
				<view class="search-title-left-item">
					{{dateList}}
				</view>
				<uni-icons type="calendar"  v-show='iconShow' size="36rpx"></uni-icons>
			</view>
<!-- 			<view class="search-title-right" @click="inputDialogToggle()">
				<view class="search-title-right-item">
					{{workList}}
				</view>
				<uni-icons type="list"  size="36rpx"></uni-icons>
			</view>
			<view> -->
				<!-- 输入框示例 -->
<!-- 				<uni-popup ref="inputDialog" type="dialog">
					<uni-popup-dialog ref="inputClose"  mode="input" title="班组" :value="productionGroup" 
						placeholder="请输入班组" @confirm="dialogInputConfirm"></uni-popup-dialog>
				</uni-popup>
			</view> -->
		</view>
		<view class='bg-grey'>
			<view class='time-flex' v-if="visible">
				<view class='time-flex-item' @click="selectTime(0)">
					<view class='time-flex-item-padding'>今天</view>
				</view>
				<view class='time-flex-item' @click="selectTime(1)">
					<view class='time-flex-item-padding'>昨天</view>
				</view>
				<view class='time-flex-item' @click="selectTime(2)">
					<view class='time-flex-item-padding'>本月</view>
				</view>
				<view class='time-flex-item' @click="selectTime(3)">
					<view class='time-flex-item-padding'>上月</view>
				</view>
				<view class='time-flex-item' @click="selectTime(4)">
					<view class='time-flex-item-padding'>全部</view>
				</view>
				<view class='time-flex-item' @click="selectTime(5)">
					<view class='time-flex-item-padding'>选择时间</view>
				</view>
			</view>
		</view>
		<view class='bg-grey'>
			<view class="conf-list">
				<view class="conf-list-item" v-for="(item,index) in listData" :key="index">
					<view class="conf-list-card">
						<view class="conf-list-title">
							<view>
								<text>补贴类别：</text>
								{{item.type_dictText}}
							</view>
							
							<view>
								<text>补贴生效日期：</text>
								<text>{{item.jcDate}}</text>
							</view>
						</view>
						
						<view class="conf-list-content1">
							<view>
								<text>员工：</text>
								<text>{{item.realname}}</text>
							</view>
							<view>
								<text>部门：</text>
								<text>{{item.bumen==null?'':item.bumen}}</text>
							</view>
						</view>
						<view class="conf-list-content1">
							<view>
								<text>岗位：</text>
								<text>{{item.station==null?'':item.station}}</text>
							</view>
							<view>
								<text>补贴金额：</text>
								<text>{{item.jlAmount==null?'':item.jlAmount}}</text>
							</view>
						</view>
						<view class="conf-list-content">
							<view>
								<text>原因：</text>
								<text>{{item.reason==null?'':item.reason}}</text>
							</view>
						</view>
						<view class="conf-list-content">
							<view>
								<text>备注：</text>
								<text>{{item.remark==null?'':item.remark}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-calendar ref="calendar" class="uni-calendar--hook" :clear-date="true" :date="info.date"
			:insert="info.insert" :lunar="info.lunar" :startDate="info.startDate" :endDate="info.endDate"
			:range="info.range" @confirm="confirm" @close="close" />

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		computed: {
			...mapState(['companyCode'])
		},
		data() {
			return {
				dateSel:'5',
				beginDate: '',
				endDate: '',
				dateList:'全部',
				workList: '进行中',
				text: '暂无数据',
				title: '下拉刷新 + 加载更多',
				data: [],
				listData: [],
				pageNo: 0,
				endFlag: false,
				filter: "",
				loadMoreText: "加载中...",
				dateList: '日期',
				visible: false,
				info: {
					lunar: true,
					range: true,
					insert: false,
					selected: []
				},
			};
		},

		onShow() {
			this.loadMoreText = "加载更多";
		},
		onLoad(e) {
			this.initData();
		},
		mounted(){
		},
		onUnload() {
			this.listData = [];
		},
		onReachBottom() {
			if (this.endFlag == true) {
				this.loadMoreText = "已显示全部数据"
				uni.showToast({
					icon: 'none',
					title: this.loadMoreText
				});
				return;
			}
			setTimeout(() => {
				this.listData = []
				this.getList()
			}, 300);
		},
		onPullDownRefresh() {
			uni.stopPullDownRefresh();
		},
		methods: {
			visableChange() {
				this.visible = !this.visible
			},
			//选择时间
			selectTime(index) {
				this.pageNo = 0;
				this.endFlag = false;
				switch (index) {
					case 0:
						this.dateList = '今天'
						this.dateSel = 1
						this.iconShow = true
						break;
					case 1:
						this.dateList = '昨天'
						this.dateSel = 2
						this.iconShow = true
						break;
					case 2:
						this.dateList = '本月'
						this.dateSel = 3
						this.iconShow = true
						break;
					case 3:
						this.dateList = '上月'
						this.dateSel = 4
						this.iconShow = true
						break;
					case 4:
						this.dateList = '全部'
						this.dateSel = 5
						this.iconShow = true
						break;
					default:
						this.$refs.calendar.open()
						break;
				}
				
				if(index!=5){
					this.getList()
				}
			setTimeout(() => {
				this.visible = !this.visible
			}, 300);
				
			},
			confirm(e) {
				this.iconShow = false
				this.dateList = e.range.before + "~" + e.range.after
				this.dateSel = 6
				this.beginDate = e.range.before
				this.endDate = e.range.after
				this.pageNo = 0;
				this.getList()
			},
			initData() {
				setTimeout(() => {
					this.getList();
					uni.stopPullDownRefresh();
				}, 300);
			},
           //产品列表
			getList() {
				this.listData=[]
				let url = '/dcloud/erp/hr/dcjiangcheng/dcJiangcheng/list'
				this.pageNo+=1
				this.$http.get(url, {
					params: {
						'category':0,
						"dateSel": this.dateSel,
						"dateStart":this.beginDate,
						"dateEnd":this.endDate,
					}
				}).then(res => {
					if (res.data.success) {
						this.listData=res.data.result.records;
						if (this.listData.length <100) {
							this.endFlag = true;
							this.loadMoreText = "已显示全部数据"
						}
					}
				}).catch(err => {
					console.log(err);
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-select {
		font-size: 14px;
		border: 0px solid #dd524d;
		box-sizing: border-box;
		border-radius: 0px;
		padding: 0 5px;
		padding-left: 10px;
		position: relative;
		display: flex;
		-webkit-user-select: none;
		user-select: none;
		flex-direction: row;
		align-items: center;
		border-left: solid 1px #e5e5e5;
		width: 100%;
		flex: 1;
		height: 50upx;
	}

	::v-deep .uni-stat__actived {
		width: 150rpx;
		flex: 1;
	}

	page {
		background: #FFFFFF;
		width: 750upx;
		overflow-x: hidden;
	}
	.search-title {
		display: flex;
		padding: 5upx 0upx;
	
		.search-title-left {
			flex: 1;
			height: 60upx;
			display: flex;
			justify-content: center;
			border-right: solid 1px #e5e5e5;
	
			.search-title-left-item {
				font-size: 32upx;
				line-height: 62upx;
				// margin-right: 15upx;
			}
		}
		.search-title-left:active{
			background-color: #f5f5f5;
		}
	
		.search-title-right {
			flex: 1;
			height: 60upx;
			display: flex;
			justify-content: center;
			.search-title-right-item {
				font-size: 32upx;
				line-height: 62upx;
				margin-right: 15upx;
			}
		}
		.search-title-right:acitve{
			background-color: #f5f5f5;
		}
	}
	.bg-grey {
		background-color: rgb(234, 231, 231);
		padding: 2upx 20upx;

		.time-flex {
			display: flex;
			flex-wrap: wrap;

			.time-flex-item {
				width: 50%;
				text-align: center;
				height: 100upx;
				padding: 10upx 30upx;

				.time-flex-item-padding {
					background: #FFFFFF;
					height: 80upx;
					color: black;
					border-radius: 14upx;
					line-height: 80upx;
				}
				.time-flex-item-padding:active {
						background-color: #f5f5f5;
					}
			}
		}

		.conf-list {
			margin-top: -10upx;
			.conf-list-item {
				height: 380upx;
				background: #FFFFFF;
				color: black;
				border-radius: 20upx;

				.conf-list-card {
					height: 380upx;
					border-radius: 20upx;
					margin-top: 20upx;

					.conf-list-title {
						height: 60upx;
						display: flex;
						padding: 6upx 20upx 10upx 20upx;
						justify-content: space-between;
						border-radius: 20upx 20upx 0upx 0upx;
						border-bottom: solid 1px #e5e5e5;
						font-size: 30upx;
					}

					.conf-list-content {
						height: 80upx;
						padding: 0 20upx;
						font-size: 26upx;
					}

					.conf-list-content1 {
						height: 80upx;
						padding: 10upx 20upx;
						font-size: 26upx;
						display: flex;
						justify-content: space-between;
						view{
							font-size: 26upx;
						}
					}
				}
			}
		}
	}
</style>
